<template>
  <div class="controlLayerContainer" v-if="isControlLayerShow">
    <div class="styleChangePanel" style="" v-show="isStyleShow">
      <p>专题图要素样式：</p>
      <div class="item">
        <span>颜色：</span>
        <input id="myColor" type="color" v-model="colorStyleLayer" />
      </div>
      <div class="item">
        <span>大小/粗细：</span>
        <select name="" id="" v-model="featureUrl" @change="handleFeatureUrl">
          <option value="4">4</option>
          <option value="8">8</option>
          <option value="15">15</option>
          <option value="60">60</option>
        </select>
      </div>
      <div class="btnGroup">
        <button @click="saveLayerStyle">保存</button>
        <button @click="isStyleShow = false">取消</button>
      </div>
    </div>
    <div class="controlLayerTitle drag-handle">
      <div class="title-left">
        <div class="bar"></div>
        <div class="title-text">图层控制</div>
      </div>
      <div class="title-right">
        <!-- <div  tabindex="0" class="icon">-</div> -->
        <div tabindex="0" class="icon" @click="closeDialog">×</div>
      </div>
    </div>
    <div class="controlLayerContent">
      <el-tree
        :data="layerData"
        show-checkbox
        check-on-node-click
        node-key="label"
        :default-checked-keys="defaultCheckedKeys"
        default-expand-all
        :render-content="renderLayerContent"
        style="
          width: 100%;
          color: #ffffff;
          font-family: Source Han Sans CN;
          font-weight: medium;
          background-color: transparent;
        "
        @check="handleCheck"
        ref="layerTree"
      ></el-tree>
    </div>
  </div>
</template>

<script>
import ImageLayer from "ol/layer/Image";
import dmgis from "@/api/dmgis";
import {
  getListFeatureTemplate,
  deleteFeatureTemplate,
  updateFeatureTemplate,
} from "@/api/EquipmentManagement";
export default {
  name: "layerPanel",
  props: {
    dialogVisible: {
      type: Boolean,
      required: true,
    },
  },
  computed: {
    isControlLayerShow() {
      // 返回 prop 的值
      return this.dialogVisible;
    },
  },
  methods: {
    async saveLayerStyle() {
      this.rgb = `RGB(${parseInt(
        this.colorStyleLayer.substring(1, 3),
        16
      )},${parseInt(this.colorStyleLayer.substring(3, 5), 16)},${parseInt(
        this.colorStyleLayer.substring(5, 7),
        16
      )})`;
      console.log(this.rgb, this.colorStyleLayer, "colorStyleLayer");
      await updateFeatureTemplate({
        id: this.styleId,
        color: this.rgb,
        size: this.featureUrl,
      }).then((res) => {
        this.$message.success("保存成功");
        this.updateLayerData();
      });
    },
    removeThematicLayer(params) {
      deleteFeatureTemplate({
        id: params.layername,
      }).then((res) => {});
    },
    handleFeatureUrl() {
      this.addTileLayer({
        layername: "piplineTile",
        url: this.featureUrl,
        extent: [46101.32565, 28025.4831, 59010.10055, 40934.258],
      });
    },
    addTileLayer(layerDetail) {
      console.log("layerDetail", layerDetail);
      // this.layerMap.map
      //   .getLayers()
      //   .getArray()
      //   .forEach((layer) => {
      //     if (layer.get("layerName") == "piplineTile_true") {
      //       layer.setVisible(false);
      //     }
      //   });
      // this.layerMap.map
      //   .getLayers()
      //   .getArray()
      //   .forEach((layer) => {
      //     if (layer.get("layerName") == "piplineTile") {
      //       this.layerMap.map.removeLayer(layer);
      //     }
      //   });
      console.log(layerDetail, "02.05addTileLayer参数");
      this.layerMap.layer.getTileMapByUrl(
        layerDetail.url,
        layerDetail.layername,
        layerDetail.extent,
        layerDetail.zIndex
      );
    },
    delTileLayer(layerDetail) {
      this.layerMap.map
        .getLayers()
        .getArray()
        .forEach((layer) => {
          if (layer.get("layerName") == layerDetail.layername) {
            layer.setVisible(true);
            this.layerMap.map.removeLayer(layer);
          }
        });
    },
    closeDialog() {
      let mainLayer = ["矢量地图瓦片", "影像地图瓦片", "管网数据"];
      // 通过修改 prop 来关闭弹窗
      this.layerMap.map
        .getLayers()
        .getArray()
        .forEach((layer) => {
          if (
            !mainLayer.includes(layer.get("layerName") || layer.get("name"))
          ) {
            this.layerMap.map.removeLayer(layer);
          }
        });
      this.$emit("update:dialogVisible", false);
    },

    handleCheck(checkedNodes, checked) {
      console.log(
        this.lastLayerData,
        "this.lastLayerData",
        checked.checkedKeys,
        "checked.checkedKeys"
      );
      //加图层操作
      if (checked.checkedKeys.length > 0) {
        //判断新增还是取消
        if (checked.checkedKeys.length > this.lastLayerData.length) {
          //新增操作
          let addLayerItem = checked.checkedKeys.filter(
            (item) => !this.lastLayerData.includes(item)
          );
          console.log("addLayerItem ", addLayerItem);
          // console.log(addLayerItem[1], 'addLayerItem添加图层操作');
          if (addLayerItem[1] != "管网底图展示") {
            if (addLayerItem[0] == "管网底图") {
              //发送请求，添加图层
              let layerRequest = this.findLeafNode(
                this.layerData,
                addLayerItem[1]
              );
              console.log(layerRequest, "layerRequest0");
              if (layerRequest) {
                console.log(
                  layerRequest.params,
                  "02.05layerRequest添加图层addlayer参数"
                );
                layerRequest.addlayer(layerRequest.params);
              }
            } else {
              //发送请求，添加图层
              let layerRequest = this.findLeafNode(
                this.layerData,
                addLayerItem[0]
              );
              console.log(layerRequest, "layerRequest1");
              if (layerRequest) {
                console.log(
                  layerRequest.params,
                  "02.05layerRequest添加图层addlayer参数"
                );
                layerRequest.addlayer(layerRequest.params);
              }
            }
            // console.log(layerRequest, "layerRequest添加图层操作");
          } else {
            // console.log('管线底图展示', '处理展示管线底图展示');
            this.setLayerVisibility("管网数据", true);
          }
        } else {
          // console.log('取消操作', '取消操作');
          //取消操作
          let delLayerItem = this.lastLayerData.filter(
            (item) => !checked.checkedKeys.includes(item)
          );
          // console.log(delLayerItem, 'addLayerItem删除图层操作');
          if (delLayerItem[1] != "管网底图展示") {
            let delParams = null;
            delParams = this.findLeafNode(this.layerData, delLayerItem[0]);
            console.log("移除图层", delParams);
            this.layerMap.map.getAllLayers().forEach((layer) => {
              let name = layer.get("name") || layer.get("layerName");
              if (name == delParams.params.layername) {
                delParams.delayer(delParams.params);
              }
            });
          } else {
            // console.log('管线底图展示', '处理隐藏管线底图展示');
            //
            this.setLayerVisibility("管网数据", false);
          }
        }
        //记录当前选中的图层
        this.lastLayerData = checked.checkedKeys;
      } else {
        // console.log('最后一个节点取消操作', '取消操作');
        //取消操作
        let delLayerItem = this.lastLayerData.filter(
          (item) => !checked.checkedKeys.includes(item)
        );
        if (delLayerItem[1] != "管网底图展示") {
          let delParams = null;
          delParams = this.findLeafNode(this.layerData, delLayerItem[0]);

          this.layerMap.map.getAllLayers().forEach((layer) => {
            let name = layer.get("name") || layer.get("layerName");
            if (name == delParams.params.layername) {
              delParams.delayer(delParams.params);
            }
          });
        } else {
          // console.log('管线底图展示', '处理隐藏管线底图展示');

          this.setLayerVisibility("管网数据", false);
        }
      }
      //记录当前选中的图层
      this.lastLayerData = checked.checkedKeys;
      // console.log(this.lastLayerData, '当前选中的图层');
    },
    setLayerVisibility(layerName, visible) {
      this.layerMap.map
        .getLayers()
        .getArray()
        .forEach((layer) => {
          if (layerName == layer.get("layerName")) {
            layer.setVisible(visible);
          }
        });
    },
    //找叶子节点
    findLeafNode(data, labelToFind) {
      let result = null;
      console.log("查找叶子节点的data", "lebel", data, labelToFind);
      for (const item of data) {
        if (item.label == labelToFind) {
          // 检查当前项是否为叶子节点（没有children属性或children为空数组）
          if (!item.children || item.children.length === 0) {
            result = item;
            break;
          }
        }
        // 如果当前项有子节点，则递归地在子节点中查找
        if (item.children && item.children.length > 0) {
          let childResult = this.findLeafNode(item.children, labelToFind);
          if (childResult) {
            result = childResult;
            break;
          }
        }
      }
      // ;
      console.log(result, "leafnode");
      return result;
    },
    renderLayerContent(h, { node, data, store }) {
      if (data.children) {
        let img = require("@/assets/layershow/layerBtnActive.png");
        return (
          <span class="button-layer">
            <img src={img} alt="" style={{ width: "25px", height: "20px" }} />
            {node.label}
          </span>
        );
      } else {
        let img = require("@/assets/" + this.dynamicPath + ".png");
        let img2 = require("@/assets/" + "修改" + ".png");
        if (data.params.isDelAccess) {
          return (
            <span
              style={{
                display: "flex",
                justifyContent: "space-between",
                width: "100%",
              }}
            >
              {node.label}
              <div>
                <img
                  src={img2}
                  style={{ height: "15px", marginRight: "15px" }}
                  on-click={(event) => {
                    event.stopPropagation(); // 阻止事件冒泡
                    this.changeStyle(data); // 处理按钮点击逻辑
                  }}
                ></img>
                <img
                  src={img}
                  style={{ height: "15px" }}
                  on-click={(event) => {
                    event.stopPropagation(); // 阻止事件冒泡
                    this.delLayerBtn(data); // 处理按钮点击逻辑
                  }}
                ></img>
              </div>
            </span>
          );
        } else {
          return <span>{node.label}</span>;
        }
      }
    },
    changeStyle(data) {
      console.log(data, "data");
      let rgb = data.params.color.match(/\d+/g);
      console.log(rgb, "rgb");

      if (rgb && rgb.length == 3) {
        const r = Math.max(0, Math.min(rgb[0], 255));
        const g = Math.max(0, Math.min(rgb[1], 255));
        const b = Math.max(0, Math.min(rgb[2], 255));
        const rr = r.toString(16).padStart(2, "0");
        const gg = g.toString(16).padStart(2, "0");
        const bb = b.toString(16).padStart(2, "0");
        let hexColor = `#${rr}${gg}${bb}`;
        this.colorStyleLayer = hexColor;
        let defaultColor = document.getElementById("myColor");

        defaultColor.defaultValue = this.colorStyleLayer;
      } else {
        console.error("Invalid RGB color format");
      }
      // this.colorStyleLayer = data.params.color;
      this.featureUrl = data.params.size;
      console.log("修改图层id", data.params.layername);
      this.styleId = data.params.layername;
      this.isStyleShow = true;
    },
    delLayerBtn(data) {
      console.log("删除图层", data.params.layername);
      const h = this.$createElement;
      this.$msgbox({
        title: "",
        message: h("p", null, [h("span", null, "是否删除该图层？ ")]),
        showCancelButton: true,
        distinguishCancelAndClose: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      }).then(async (action) => {
        if (action == "confirm") {
          await data.removeLayerFromDB(data.params);
          this.updateLayerData();
        }
      });
    },
    //添加工程地图
    addDmProject(val) {
      let dmProjectLayer = new dmgis.olmap.ServiceLayer(
        "TapWaterMap",
        this.dmserurl,
        {
          maxZoom: 18,
          minZoom: 0,
          opacity: 1,
          tileSize: [256, 256],
        }
      );
      //创建点线面时回调
      dmgis.olmap.ServiceLayer.prototype.HandleBuildInfo = function (feature) {
        this.currentindex = feature.index;
      };
      setTimeout(() => {
        dmProjectLayer.serviceLayer = new ImageLayer({
          zIndex: 4,
          name: val.layername,
        });
        this.layerMap.map.addLayer(dmProjectLayer.serviceLayer);
        let querydmParams = new dmgis.object.SpatialConditionQuery();
        let serviceLayer = dmProjectLayer.serviceLayer;
        dmProjectLayer.serviceLayer.setVisible(true);
        querydmParams.polygonStr = "";
        if (val.range !== "") {
          JSON.parse(val.range).forEach((item, index) => {
            let itemGroup = item.join(" ");
            if (index == JSON.parse(val.range).length - 1) {
              querydmParams.polygonStr += itemGroup;
            } else {
              querydmParams.polygonStr += itemGroup + ";";
            }
          });
        }
        let nowExtent = this.layerMap.map.getView().calculateExtent();
        querydmParams.DispRect.minx = nowExtent[0];
        querydmParams.DispRect.miny = nowExtent[1];
        querydmParams.DispRect.maxx = nowExtent[2];
        querydmParams.DispRect.maxy = nowExtent[3];
        querydmParams.conditionsList = val.conditions;
        querydmParams.color = val.color;
        querydmParams.style=val.style; 
        console.log("val.tableName", val.tableName);
        querydmParams.layers = val.tableName.split(",").map((item) => {
          const infoIndex = item.indexOf("_info"); // 找到 "_info" 的位置
          if (infoIndex !== -1) {
            return item.substring(0, infoIndex + 5); // 截取到 "_info" 结尾的部分
          } else {
            return item; // 如果没有 "_info"，直接返回原字符串
          }
        });
        console.log("querydmParams.layers", querydmParams.layers);
        querydmParams.size = val.size.toUpperCase().replace(/\s+/g, "");
        dmProjectLayer.RefreshMap(serviceLayer, querydmParams, 10);
        let watcher = (e) => {
          this.getMapRefresh(e, dmProjectLayer);
        };
        this.dmProjGroup.push({
          layername: val.layername,
          layer: dmProjectLayer,
          watcher: watcher,
        });
        this.layerMap.map.on("moveend", watcher);
      }, 100);
    },
    getMapRefresh(evt, dmProjectLayer) {
      let serviceLayer = dmProjectLayer.serviceLayer;
      let frameState = evt.frameState;
      let imgSvrParam = dmProjectLayer.ImgMapService;
      imgSvrParam.DispRect.minx = frameState.extent[0];
      imgSvrParam.DispRect.miny = frameState.extent[1];
      imgSvrParam.DispRect.maxx = frameState.extent[2];
      imgSvrParam.DispRect.maxy = frameState.extent[3];
      imgSvrParam.imgWid = frameState.size[0];
      imgSvrParam.imgHig = frameState.size[1];
      dmProjectLayer.RefreshMap(
        serviceLayer,
        imgSvrParam,
        frameState.viewState.zoom
      );
    },
    delDmProject(val) {
      let dmProjectLayer = null;
      if (!val) {
        return;
      }
      let delLayerIndex = this.dmProjGroup.findIndex(
        (item) => item.layername == val.layername
      );
      if (delLayerIndex !== -1) {
        dmProjectLayer = this.dmProjGroup[delLayerIndex];
        this.dmProjGroup.splice(delLayerIndex, 1);
      } else {
        return;
      }
      this.layerMap.map.un("moveend", dmProjectLayer.watcher);
      this.layerMap.map
        .getLayers()
        .getArray()
        .forEach((layer) => {
          if (layer.get("name") == val.layername) {
            this.layerMap.map.removeLayer(layer);
          }
        });
    },
    initMap() {
      setTimeout(() => {
        this.layerMap = this.$store.getters.Map;
      }, 1000);
    },
    updateLayerData() {
      this.layerData.forEach((item) => {
        if (item.params) {
          item.delayer(item.params);
        }
      });
      this.layerData = [
        {
          label: "管网底图",
          children: [
            {
              label: "管网底图展示",
              params: {
                layername: "管网数据",
                url: "/layerData/piplineAndNet",
                extent: [307268.865, 649611.550637, 319697.339, 662040.024637],
                conditions: "KJ>='300'",
                zIndex: 2,
              },
              addlayer: (params) => this.addTileLayer(params),
              delayer: (params) => this.delTileLayer(params),
              removeLayerFromDB: (params) => this.removeThematicLayer(params),
            },
            {
              label: "阀门图层展示",
              params: {
                color: "RGB(0,0,0)",
                layername: "阀门数据展示",
                url: "/layerData/piplineAndNet",
                range:
                  "[[307268.865000, 649611.550637], [319697.339000, 649611.550637], [319697.339000, 662040.024637], [307268.865000, 662040.024637], [307268.865000, 649611.550637]]",
                conditions: "diameter>'0'",
                size:"10",
                tableName: "gatevalve_info_att,butterflyvalve_info_att",
                zIndex: 2,
                style:"530",
              },
              addlayer: (params) => this.addTileLayer(params),
              delayer: (params) => this.delTileLayer(params),
              removeLayerFromDB: (params) => this.removeThematicLayer(params),
            },
            {
              label: "消防栓图层展示",
              params: {
                color: "RGB(255,0,0)",
                layername: "消防栓数据展示",
                url: "/layerData/piplineAndNet",
                range:
                  "[[307268.865000, 649611.550637], [319697.339000, 649611.550637], [319697.339000, 662040.024637], [307268.865000, 662040.024637], [307268.865000, 649611.550637]]",
                conditions: "diameter>'0'",
                size:"10",
                style:"529",
                tableName: "firehydrant_info_att",
                zIndex: 2,
              },
              addlayer: (params) => this.addDmProject(params),
              delayer: (params) => this.delDmProject(params),
              removeLayerFromDB: (params) => this.removeThematicLayer(params),
            },
            {
              label: "水表图层展示",
              params: {
                color: "RGB(255, 215, 0)",
                layername: "水表数据展示",
                style:"526",
                url: "/layerData/piplineAndNet",
                range:
                  "[[307268.865000, 649611.550637], [319697.339000, 649611.550637], [319697.339000, 662040.024637], [307268.865000, 662040.024637], [307268.865000, 649611.550637]]",
                conditions: "diameter>'0'",
                size:"10",
                tableName: "water_meter_info_att",
                zIndex: 2,
              },
              addlayer: (params) => this.addDmProject(params),
              delayer: (params) => this.delDmProject(params),
              removeLayerFromDB: (params) => this.removeThematicLayer(params),
            },
          ],
        },
        {
          label: "专题地图",
          children: [
            {
              label: "管线专题",
              params: {
                layername: "piplineTile",
                url: "/layerData/pipline_4",
                extent: [46101.32565, 28025.4831, 59010.10055, 40934.258],
                conditions: "KJ>='300'",
              },
              addlayer: (params) => this.addTileLayer(params),
              delayer: (params) => this.delTileLayer(params),
              removeLayerFromDB: (params) => this.removeThematicLayer(params),
            },
          ],
        },
      ];
      let mainLayer = ["矢量地图瓦片", "影像地图瓦片", "管网数据"];
      this.layerMap.map
        .getLayers()
        .getArray()
        .forEach((layer) => {
          if (
            !mainLayer.includes(layer.get("layerName") || layer.get("name"))
          ) {
            this.layerMap.map.removeLayer(layer);
          }
        });
      this.lastLayerData = [];
      getListFeatureTemplate().then((res) => {
        res.data.forEach((item) => {
          this.layerData[1].children.push({
            label: item.featureTemplateName,
            params: {
              layername: item.id,
              range: item.range,
              conditions: item.queryConditionValue,
              tableName: item.queryTableName,
              isDelAccess: true,
              color: item.color,
              size: item.size,
            },
            addlayer: (params) => this.addDmProject(params),
            delayer: (params) => this.delDmProject(params),
            removeLayerFromDB: (params) => this.removeThematicLayer(params),
          });
        });
      });
    },
  },
  watch: {
    showLayerPanel(newVal) {
      if (newVal) {
        this.layerBtnImg = require("@/assets/layershow/layerBtnActive.png");
      } else {
        this.layerBtnImg = require("@/assets/layershow/layerBtnGrey.png");
      }
    },
  },
  mounted() {
    this.initMap();
    getListFeatureTemplate().then((res) => {
      res.data.forEach((item) => {
        this.layerData[1].children.push({
          label: item.featureTemplateName,
          params: {
            layername: item.id,
            range: item.range,
            conditions: item.queryConditionValue,
            tableName: item.queryTableName,
            isDelAccess: true,
            color: item.color,
            size: item.size,
          },
          addlayer: (params) => this.addDmProject(params),
          delayer: (params) => this.delDmProject(params),
          removeLayerFromDB: (params) => this.removeThematicLayer(params),
        });
      });
    });
    // this.defaultCheckedKeys = this.$store.getters.treeDefault;
    this.lastLayerData = ["管网底图展示"];
  },
  data() {
    return {
      styleId: "",
      isStyleShow: false,
      rgb: "RGB(255,255,255)",
      colorStyleLayer: "#FFF",
      defaultCheckedKeys: ["管网底图展示"],
      dynamicPath: "删除1",
      btn1: require("@/assets/删除1.png"),
      btn2: require("@/assets/删除2.png"),
      dmProjGroup: [],
      featureUrl: "15",
      dmserurl: process.env.VUE_APP_BASE_API + "/dmgis",
      dmProjectLayer: null,
      layerMap: null,
      lastLayerData: [],
      layerBtnImg: require("@/assets/layershow/layerBtnGrey.png"),
      showLayerPanel: false,
      layerData: [
        {
          label: "管网底图",
          children: [
            {
              label: "管网底图展示",
              params: {
                layername: "管网数据",
                url: "/layerData/piplineAndNet",
                extent: [307268.865, 649611.550637, 319697.339, 662040.024637],
                conditions: "KJ>='300'",
                zIndex: 2,
              },
              addlayer: (params) => this.addTileLayer(params),
              delayer: (params) => this.delTileLayer(params),
              removeLayerFromDB: (params) => this.removeThematicLayer(params),
            },
            {
              label: "阀门图层展示",
              params: {
                color: "RGB(0,0,0)",
                layername: "阀门数据展示",
                url: "/layerData/piplineAndNet",
                range:
                  "[[307268.865000, 649611.550637], [319697.339000, 649611.550637], [319697.339000, 662040.024637], [307268.865000, 662040.024637], [307268.865000, 649611.550637]]",
                conditions: "diameter>'0'",
                size:"10",
                tableName: "gatevalve_info_att,butterflyvalve_info_att",
                zIndex: 2,
                style:"530",
              },
              addlayer: (params) => this.addDmProject(params),
              delayer: (params) => this.delDmProject(params),
              removeLayerFromDB: (params) => this.removeThematicLayer(params),
            },
            {
              label: "消防栓图层展示",
              params: {
                color: "RGB(255,0,0)",
                layername: "消防栓数据展示",
                url: "/layerData/piplineAndNet",
                range:
                  "[[307268.865000, 649611.550637], [319697.339000, 649611.550637], [319697.339000, 662040.024637], [307268.865000, 662040.024637], [307268.865000, 649611.550637]]",
                conditions: "diameter>'0'",
                size:"10",
                tableName: "firehydrant_info_att",
                zIndex: 2,
                style:"529",
              },
              addlayer: (params) => this.addDmProject(params),
              delayer: (params) => this.delDmProject(params),
              removeLayerFromDB: (params) => this.removeThematicLayer(params),
            },
            {
              label: "水表图层展示",
              params: {
                color: "RGB(255, 215, 0)",
                layername: "水表数据展示",
                url: "/layerData/piplineAndNet",
                range:
                  "[[307268.865000, 649611.550637], [319697.339000, 649611.550637], [319697.339000, 662040.024637], [307268.865000, 662040.024637], [307268.865000, 649611.550637]]",
                conditions: "diameter>'0'",
                size:"10",
                style:"526",
                tableName: "water_meter_info_att",
                zIndex: 2,
              },
              addlayer: (params) => this.addDmProject(params),
              delayer: (params) => this.delDmProject(params),
              removeLayerFromDB: (params) => this.removeThematicLayer(params),
            },
          ],
        },
        {
          label: "专题地图",
          children: [
            {
              label: "管线专题",
              params: {
                layername: "piplineTile",
                url: "/layerData/pipline_4",
                extent: [46101.32565, 28025.4831, 59010.10055, 40934.258],
                conditions: "KJ>='300'",
                zIndex: 1,
              },
              addlayer: (params) => this.addTileLayer(params),
              delayer: (params) => this.delTileLayer(params),
              removeLayerFromDB: (params) => this.removeThematicLayer(params),
            },
          ],
        },
      ],
    };
  },
  destroyed() {
    if (this.layerMap) {
      let mainLayer = ["矢量地图瓦片", "影像地图瓦片", "管网数据"];
      this.layerMap.map
        .getLayers()
        .getArray()
        .forEach((layer) => {
          if (
            !mainLayer.includes(layer.get("layerName") || layer.get("name"))
          ) {
            this.layerMap.map.removeLayer(layer);
          }
        });
    }
  },
};
</script>

<style lang="scss" scoped>
.controlLayerContainer {
  width: 20vw;
  color: white;
  position: absolute;
  top: 5vh;
  right: -79vw;
  // height: 46vh;
  z-index: 2;
  .controlLayerTitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    font-size: 1rem;
    background-color: #285383;
    .title-left,
    .title-right {
      display: flex;
      align-items: center;
    }
    .bar {
      width: 5px; /* 小竖条的宽度 */
      height: 20px; /* 小竖条的高度 */
      background-color: white; /* 小竖条的颜色 */
      margin-right: 10px; /* 小竖条和文字之间的间距 */
    }
    .icon {
      width: 20px; /* 小方框的宽度 */
      height: 20px; /* 小方框的高度 */
      // border: 1px solid #4998f2; /* 小方框的边框 */
      margin-left: 5px; /* 小方框之间的间距 */
    }
    .icon:hover {
      color: #4998f2;
    }
    .icon:focus {
      color: #4998f2;
    }
  }
  ::-webkit-scrollbar {
    display: none;
  }
  .controlLayerContent {
    height: 50vh;
    padding: 10px;
    display: flex;

    flex-direction: column;
    background-color: #285383;
    overflow-y: scroll;
    font-size: 0.8rem;
    ::v-deep .el-tree-node__content:hover {
      background-color: rgba(1, 79, 115, 0.4);
    }
    ::v-deep .el-tree-node:focus > .el-tree-node__content {
      background-color: transparent;
    }
    // ::v-deep .el-tree-node__content > .el-tree-node__expand-icon {
    //   display: none;
    // }
    ::v-deep .el-tree-node__content > label.el-checkbox {
      margin: 0px 5px;
    }
    ::v-deep .is-leaf + .el-checkbox .el-checkbox__inner {
      display: inline-block;
    }
    ::v-deep .el-checkbox .el-checkbox__inner {
      display: none;
    }
  }
}
.control-layer {
  width: 3vw;
  color: white;
  position: absolute;
  top: 13vh;
  right: -4vw;
  height: 6vh;
  z-index: 2;
  background-color: #285383;
}
.layerBtn {
  position: absolute;
  left: 10px;
  top: 0.5rem;

  img {
    width: 40px;
    height: 40px;
  }
}
.layerPanel {
  position: absolute;
  left: 60px;
  top: 2rem;
  width: 300px;
  height: 700px;
  border: 1px solid #000;
  background-color: rgba(35, 69, 100, 0.7);
  ::v-deep .el-tree-node__content:hover {
    background-color: rgba(1, 79, 115, 0.4);
  }
  ::v-deep .el-tree-node:focus > .el-tree-node__content {
    background-color: transparent;
  }
  ::v-deep .el-tree-node__content > .el-tree-node__expand-icon {
    display: none;
  }
  ::v-deep .el-tree-node__content > label.el-checkbox {
    margin: 0px 5px;
  }
}
.styleChangePanel {
  position: absolute;
  width: 15rem;
  // height: 8rem;
  background: #18527d;
  left: -70vw;
  text-align: left;
  p {
    font-size: 1rem;
    font-weight: 800;
    margin-left: 3px;
  }
  span {
    font-size: 1rem;
    margin-left: 1rem;
  }
  select {
    width: 5rem;
  }
}
.btnGroup {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0.5rem 0;
  button {
    margin: 0 0.5rem;
  }
}
</style>
